<script lang="ts" setup>
import { useAttrs } from 'vue'

import { SwitchItem } from './components'
import { HandlerEnum } from './enum'
import { BasicDrawer } from '@/components/Drawer'

import { useRootSetting } from '@/hooks/setting/useRootSetting'
import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting'

defineOptions({ name: 'SettingDrawer' })
const attrs = useAttrs()
const { getFullContent } = useRootSetting()

const { getShowHeader, getFixed } = useHeaderSetting()
</script>

<template>
  <BasicDrawer v-bind="attrs" width="330" class="setting-drawer">
    <SwitchItem
      title="固定header"
      :event="HandlerEnum.HEADER_FIXED"
      :def="getFixed"
      :disabled="!getShowHeader || getFullContent"
    />
    <SwitchItem
      title="全屏内容"
      :event="HandlerEnum.FULL_CONTENT"
      :def="getFullContent"
    />
  </BasicDrawer>
</template>
